<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="./css/input.css" />
</head>

<body>

    <h3>第一部分</h3>
    <div class="checked">
        <p>:checked 选择所有选中的表单元素</p>
        <pre>
.checked input:checked {
    height: 50px;
    width: 50px;
}
&lt;input type=&quot;radio&quot; checked=&quot;checked&quot; value=&quot;male&quot; name=&quot;gender&quot; /&gt; Male&lt;br /&gt;
&lt;input type=&quot;radio&quot; value=&quot;female&quot; name=&quot;gender&quot; /&gt; Female&lt;br /&gt;
        </pre>
        <input type="radio" checked="checked" value="male" name="gender" /> Male<br />
        <input type="radio" value="female" name="gender" /> Female<br />
    </div>

    <hr />

    <div class="focus">
        <p>:focus 选择元素输入后具有焦点</p>
        <pre>
.focus input:focus {
    background-color: yellow;
}
&lt;input type=&quot;text&quot; value=&quot;firstname&quot; /&gt;&lt;br /&gt;
&lt;input type=&quot;text&quot; value=&quot;lastname&quot; /&gt;
        </pre>
        <input type="text" value="firstname" /><br />
        <input type="text" value="lastname" />
    </div>

    <hr />

    <div class="enabled">
        <p>:enabled 选择所有启用的表单元素</p>
        <p>:disabled 选择所有禁用的表单元素</p>
        <pre>
.enabled input:enabled {
    background-color: red;
}

.enabled input:disabled {
    background-color: blue;
}
&lt;input type=&quot;text&quot; value=&quot;default&quot; /&gt; &lt;br /&gt;
&lt;input type=&quot;text&quot; disabled=&quot;disabled&quot; value=&quot;disabled&quot; /&gt;
        </pre>
        <input type="text" value="default" /> <br />
        <input type="text" disabled="disabled" value="disabled" />
    </div>

    <hr />

    <div class="range">
        <p>:in-range 选择元素指定范围内的值</p>
        <p>:out-of-range 选择指定范围以外的值的元素属性</p>
        <pre>
.range input:in-range {
    border:2px solid blue;
}
.range input:out-of-range {
    border:2px solid red;
}

&lt;input type=&quot;number&quot; min=&quot;5&quot; max=&quot;10&quot; value=&quot;7&quot; /&gt; &lt;br /&gt;
&lt;input type=&quot;number&quot; min=&quot;5&quot; max=&quot;10&quot; value=&quot;11&quot; /&gt;
        </pre>
        <input type="number" min="5" max="10" value="7" /> <br />
        <input type="number" min="5" max="10" value="11" />
    </div>

    <hr />

    <div class="invalid">
        <p>:invalid 选择所有无效的元素</p>
        <p>:valid 选择所有有效值的属性</p>
        <pre>
.invalid input:valid {
    border:2px solid blue;
}

.invalid input:invalid {
    border:2px solid red;
}
&lt;input type=&quot;email&quot; value=&quot;qq@qq.com&quot; /&gt;   &lt;br /&gt;
&lt;input type=&quot;email&quot; value=&quot;i am not email&quot; /&gt;
        </pre>
        <input type="email" value="qq@qq.com" /> <br />
        <input type="email" value="i am not email" />
    </div>

    <hr />

    <div class="optional">
        <p>:optional 选择没有"required"的元素属性</p>
        <p>:required 选择有"required"属性指定的元素属性</p>
        <pre>
.optional input:optional {
    border:2px solid blue;
}

.optional input:required {
    border:2px solid red;
}
&lt;input value=&quot;可选&quot; /&gt;  &lt;br /&gt;
&lt;input required value=&quot;必选&quot; /&gt; &lt;br /&gt;
        </pre>

        <input value="可选" /> <br />
        <input required value="必选" /> <br />
    </div>

    <hr />



    <div class="read">
        <p>:read-only 选择只读属性的元素属性</p>
        <p>:read-write 选择没有只读属性的元素属性</p>
        <pre>
.read input:read-write {
    border:2px solid blue;
}

.read input:read-only {
    border:2px solid red;
}
&lt;input value=&quot;普通的input元素&quot; /&gt; &lt;br /&gt;
&lt;input value=&quot;只读的input元素&quot; readonly/&gt; &lt;br /&gt;
        </pre>

        <input value="普通的input元素" /> <br />
        <input value="只读的input元素" readonly /> <br />
    </div>

    <hr />

    <h3>第二部分</h3>

    <div>
        <p>:empty 匹配没有任何子级的元素</p>
        <p>:only-child 匹配属于父元素中唯一子元素的元素</p>
        <p>:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素</p>
        <pre>
.empty p:empty {
    background-color: yellow;
    height: 10px;
    width: 100px;
}
.empty span:only-of-type {
    color: blue;
}
.empty span:only-child {
    background-color: red;
}
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;p-&gt;span &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;p-span+span 1 &lt;/span&gt;&lt;span&gt;p-span+span 2&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;p-span+strong span &lt;/span&gt;&lt;strong&gt;p-span+strong strong&lt;/strong&gt;&lt;/p&gt;
        </pre>


        <div class="empty">
            <p></p>
            <p><span>p->span </span></p>
            <p><span>p-span+span 1 </span><span>p-span+span 2</span></p>
            <p><span>p-span+strong span </span><strong>p-span+strong strong</strong></p>
        </div>

    </div>

    <hr />

    <div>
        <p>:first-of-type 选择在父类所有X子元素中的第一个X元素</p>
        <p>:last-of-type 选择在父类所有X子元素中的最后一个X元素</p>
        <p>:first-child 选择在父类所有子元素中，作为第一个，且是X元素的X元素</p>
        <p>:last-child 选择在父类所有子元素中，作为最后一个，且是X元素的X元素</p>
        <pre>
.first p:first-of-type {
    color: blue;
}
.first p:last-of-type {
    color: red;
}

.first p:first-child {
    background-color: green;
}
.first p:last-child {
    background-color: yellow;
}

&lt;div&gt;
    &lt;p&gt;p1&lt;/p&gt;
    &lt;span&gt;span1&lt;/span&gt;
    &lt;p&gt;p2&lt;/p&gt;
    &lt;span&gt;span2&lt;/span&gt;
    &lt;p&gt;p3&lt;/p&gt;
&lt;/div&gt;

&lt;div&gt;
    &lt;span&gt;span3&lt;/span&gt;
    &lt;p&gt;p4&lt;/p&gt;
    &lt;p&gt;p5&lt;/p&gt;
    &lt;p&gt;p6&lt;/p&gt;
    &lt;span&gt;span4&lt;/span&gt;
&lt;/div&gt;
        </pre>

        <div class="first">
            <div>
                <p>我是第一个元素 p1</p>
                <span>span1</span>
                <p>p2</p>
                <span>span2</span>
                <p>我是最后一个元素 p3</p>
            </div>

            <div>
                <span>我是第一个元素 span3</span>
                <p>p4</p>
                <p>p5</p>
                <p>p6</p>
                <span>我是最后一个元素 span4</span>
            </div>
        </div>

    </div>

    <hr />



    <div>
        <p>:before 在每个X元素之前插入内容</p>
        <p>:after 在每个X元素之前插入内容</p>
        <pre>
.before p:before
{ 
    content:&quot;Read this -&quot;;
    background-color:yellow;
    color:red;
    font-weight:bold;
}


.before p::after
{ 
    content:&quot; - And Thank you.&quot;;
    background-color:green;
    color:blue;
    font-weight:bold;
}

&lt;p&gt;My name is Donald&lt;/p&gt;
&lt;p&gt;I live in Ducksburg&lt;/p&gt;
        </pre>

        <div class="before">
            <p>My name is Donald</p>
            <p>I live in Ducksburg</p>
        </div>
    </div>
    <hr />



    <h3>第三部分</h3>

    <div class="link">
        <p>:link 选择所有未访问链接</p>
        <p>:visited 选择所有访问过的链接</p>
        <p>:active 选择正在活动链接</p>
        <p>:hover 把鼠标放在链接上的状态</p>
        <pre>
.link a:link {
    background-color: yellow;
}
.link a:active {
    background-color: red;
}

.link a:hover {
    background-color: blue;
}

.link a:visited {
    background-color: green;
}
&lt;p&gt;&lt;a target=&quot;_blank&quot; href=&quot;https://www.runoob.com/cssref/sel-link.html&quot;&gt;CSS :link 选择器&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a target=&quot;_blank&quot; href=&quot;https://www.runoob.com/cssref/sel-visited.html&quot;&gt;CSS :visited 选择器&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a target=&quot;_blank&quot; href=&quot;https://www.runoob.com/cssref/sel-active.html&quot;&gt;CSS :active 选择器&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a target=&quot;_blank&quot; href=&quot;https://www.runoob.com/cssref/sel-hover.html&quot;&gt;CSS :hover 选择器&lt;/a&gt;&lt;/p&gt;
        </pre>

        <p><a target="_blank" href="https://www.runoob.com/cssref/sel-link.html">CSS :link 选择器</a></p>
        <p><a target="_blank" href="https://www.runoob.com/cssref/sel-visited.html">CSS :visited 选择器</a></p>
        <p><a target="_blank" href="https://www.runoob.com/cssref/sel-active.html">CSS :active 选择器</a></p>
        <p><a target="_blank" href="https://www.runoob.com/cssref/sel-hover.html">CSS :hover 选择器</a></p>
    </div>

    <hr />

    <h3>第四部分</h3>

    <div class="root">
        <p>:root 选择当前文档的根元素</p>
        <pre>
:root {
    background-color: red;
}
&lt;iframe src=&quot;./root.html&quot;&gt;&lt;/iframe&gt;
        </pre>

        <iframe src="./root.html"></iframe>
    </div>

    <hr />



    <div class="target">
        <p>:target 选择当前跳转标签的元素</p>
        <pre>
.target :target
{
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}
&lt;p&gt;&lt;a href=&quot;#jump&quot;&gt;跳转#jump id 的标签&lt;/a&gt;&lt;/p&gt;
&lt;p id=&quot;jump&quot;&gt;&lt;b&gt;我就是jump标签&lt;/b&gt;&lt;/p&gt;
        </pre>

        <p><a href="#jump">跳转#jump id 的标签</a></p>
        <p id="jump"><b>我就是jump标签</b></p>
    </div>

    <hr />
</body>

</html>